<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>零基础 24 周前端学习路线图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  </head>
  <body class="antialiased">
    <div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
      <!-- 标题区 -->
      <div class="text-center mb-12">
        <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">零基础 24 周前端学习路线图</h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">从入门到企业级项目实战，系统掌握现代前端开发技能</p>
        <div class="mt-6 flex justify-center">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 mr-2">
            <i class="fas fa-clock mr-1"></i>
            24周系统学习
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 mr-2">
            <i class="fas fa-layer-group mr-1"></i>
            4大进阶阶段
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
            <i class="fas fa-briefcase mr-1"></i>
            企业级项目
          </span>
        </div>
      </div>
      <!-- 学习提示 -->
      <div class="bg-blue-50 rounded-xl shadow-md overflow-hidden mb-12 border border-blue-100">
        <div class="p-6">
          <h2 class="text-2xl font-bold text-blue-800 mb-4 flex items-center">
            <i class="fas fa-lightbulb text-blue-500 mr-3"></i>
            学习提示
          </h2>
          <div class="space-y-4">
            <div class="flex items-start">
              <div class="flex-shrink-0 mt-1">
                <i class="fas fa-clock text-blue-500 mr-3"></i>
              </div>
              <p class="text-sm text-blue-800">
                每天至少保证
                <strong class="font-semibold">2小时编码时间</strong>
                ，周末可安排综合练习
              </p>
            </div>
            <div class="flex items-start">
              <div class="flex-shrink-0 mt-1">
                <i class="fas fa-question-circle text-blue-500 mr-3"></i>
              </div>
              <p class="text-sm text-blue-800">
                遇到卡点：善用
                <strong class="font-semibold">AI</strong>
                、
                <strong class="font-semibold">Stack Overflow</strong>
                、
                <strong class="font-semibold">MDN文档</strong>
              </p>
            </div>
            <div class="flex items-start">
              <div class="flex-shrink-0 mt-1">
                <i class="fas fa-chart-line text-blue-500 mr-3"></i>
              </div>
              <p class="text-sm text-blue-800">
                扩展学习：关注
                <strong class="font-semibold">Web Vitals性能指标</strong>
                、
                <strong class="font-semibold">WebAssembly</strong>
                前沿技术
              </p>
            </div>
          </div>
          <div class="mt-6 p-4 bg-blue-100 rounded-lg">
            <p class="text-blue-800 font-medium">
              <i class="fas fa-check-circle mr-2"></i>
              按照此路线，24周后可达到
              <strong class="font-semibold">初中级前端工程师</strong>
              水平，具备企业项目开发能力。记得在每个阶段结束后更新简历，记录技术成长！
            </p>
          </div>
        </div>
      </div>

      <!-- 学习路线概览 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
        <div class="p-6">
          <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-map-marked-alt text-blue-500 mr-3"></i>
            学习路线概览
          </h2>
          <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-100 relative">
              <span class="stage-badge bg-blue-500 text-white">阶段一</span>
              <h3 class="font-semibold text-blue-800 mb-2">基础入门</h3>
              <p class="text-sm text-gray-600">4周掌握HTML/CSS/JS基础</p>
              <div class="mt-3 text-xs text-blue-600">
                <i class="fas fa-calendar-week mr-1"></i>
                Week 1-4
              </div>
            </div>
            <div class="bg-green-50 p-4 rounded-lg border border-green-100 relative">
              <span class="stage-badge bg-green-500 text-white">阶段二</span>
              <h3 class="font-semibold text-green-800 mb-2">核心技能提升</h3>
              <p class="text-sm text-gray-600">8周深入框架与工程化</p>
              <div class="mt-3 text-xs text-green-600">
                <i class="fas fa-calendar-week mr-1"></i>
                Week 5-12
              </div>
            </div>
            <div class="bg-purple-50 p-4 rounded-lg border border-purple-100 relative">
              <span class="stage-badge bg-purple-500 text-white">阶段三</span>
              <h3 class="font-semibold text-purple-800 mb-2">企业级技术栈</h3>
              <p class="text-sm text-gray-600">8周掌握高级开发技能</p>
              <div class="mt-3 text-xs text-purple-600">
                <i class="fas fa-calendar-week mr-1"></i>
                Week 13-20
              </div>
            </div>
            <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100 relative">
              <span class="stage-badge bg-yellow-500 text-white">阶段四</span>
              <h3 class="font-semibold text-yellow-800 mb-2">项目实战</h3>
              <p class="text-sm text-gray-600">4周完成全栈项目</p>
              <div class="mt-3 text-xs text-yellow-600">
                <i class="fas fa-calendar-week mr-1"></i>
                Week 21-24
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细学习路线 -->
      <div class="mb-12">
        <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
          <i class="fas fa-road text-blue-500 mr-3"></i>
          详细学习路线
        </h2>

        <!-- 阶段一 -->
        <div class="relative pl-8 mb-12">
          <div class="absolute left-0 top-0 h-full w-0.5 bg-blue-200"></div>
          <div class="bg-blue-50 border border-blue-100 rounded-lg p-6 relative">
            <div class="absolute -left-4 top-6 h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
              <span class="font-bold">1</span>
            </div>
            <h3 class="text-xl font-bold text-blue-800 mb-2">阶段一：基础入门（4周）</h3>
            <p class="text-blue-600 mb-4">
              <i class="fas fa-bullseye mr-2"></i>
              掌握HTML/CSS/JavaScript基础，搭建开发环境
            </p>

            <div class="space-y-6">
              <!-- Week 1 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 1：HTML & CSS基础</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>HTML5标签、语义化</li>
                  <li>CSS选择器、盒模型、Flex布局</li>
                  <li>响应式设计（Media Query）</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：静态个人简历页面
                  </span>
                </div>
              </div>

              <!-- Week 2 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 2：JavaScript基础</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>变量、数据类型、运算符</li>
                  <li>条件语句、循环</li>
                  <li>函数、作用域、闭包</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：计算器小工具
                  </span>
                </div>
              </div>

              <!-- Week 3 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 3：DOM操作 & 事件</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>DOM元素增删改查</li>
                  <li>事件监听、事件冒泡/捕获</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：TodoList待办事项应用
                  </span>
                </div>
              </div>

              <!-- Week 4 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 4：Git入门 & 网络基础</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>
                    Git安装、
                    <code class="bg-gray-100 px-1 rounded">git init/add/commit/push</code>
                  </li>
                  <li>GitHub创建仓库、提交代码</li>
                  <li>HTTP协议（GET/POST）、状态码（200/404）</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：将TodoList代码提交至GitHub
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 阶段二 -->
        <div class="relative pl-8 mb-12">
          <div class="absolute left-0 top-0 h-full w-0.5 bg-green-200"></div>
          <div class="bg-green-50 border border-green-100 rounded-lg p-6 relative">
            <div class="absolute -left-4 top-6 h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white">
              <span class="font-bold">2</span>
            </div>
            <h3 class="text-xl font-bold text-green-800 mb-2">阶段二：核心技能提升（8周）</h3>
            <p class="text-green-600 mb-4">
              <i class="fas fa-bullseye mr-2"></i>
              掌握ES6+、框架基础、工程化工具
            </p>

            <div class="space-y-6">
              <!-- Week 5-6 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 5-6：ES6+ & 异步编程</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>let/const、模板字符串、解构赋值</li>
                  <li>Promise、async/await</li>
                  <li>Fetch API调用数据</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：天气查询应用（调用开放API）
                  </span>
                </div>
              </div>

              <!-- Week 7-8 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 7-8：前端框架（React/Vue二选一）</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>
                    <strong>React路线</strong>
                    ：JSX语法、组件、Props/State
                  </li>
                  <li>
                    <strong>Vue路线</strong>
                    ：模板语法、响应式、指令
                  </li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：电影列表页（渲染API数据）
                  </span>
                </div>
              </div>

              <!-- Week 9 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 9：组件化开发</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>组件生命周期</li>
                  <li>状态管理（React Hooks / Vue Composition API）</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：评论区组件（支持增删评论）
                  </span>
                </div>
              </div>

              <!-- Week 10 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 10：路由管理</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>React Router / Vue Router</li>
                  <li>动态路由、嵌套路由</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：多页面博客系统
                  </span>
                </div>
              </div>

              <!-- Week 11 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 11：工程化工具链</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>Webpack基础配置（Loader/Plugin）</li>
                  <li>Babel转译ES6+</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：手动搭建项目脚手架
                  </span>
                </div>
              </div>

              <!-- Week 12 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 12：网络进阶 & Git协作</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>HTTPS/TLS、Cookie/Session</li>
                  <li>RESTful API设计规范</li>
                  <li>
                    Git分支管理（
                    <code class="bg-gray-100 px-1 rounded">git branch/merge/rebase</code>
                    ）
                  </li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：团队协作修复GitHub Issue
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 阶段三 -->
        <div class="relative pl-8 mb-12">
          <div class="absolute left-0 top-0 h-full w-0.5 bg-purple-200"></div>
          <div class="bg-purple-50 border border-purple-100 rounded-lg p-6 relative">
            <div class="absolute -left-4 top-6 h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
              <span class="font-bold">3</span>
            </div>
            <h3 class="text-xl font-bold text-purple-800 mb-2">阶段三：企业级技术栈（8周）</h3>
            <p class="text-purple-600 mb-4">
              <i class="fas fa-bullseye mr-2"></i>
              掌握状态管理、TypeScript、测试
            </p>

            <div class="space-y-6">
              <!-- Week 13-14 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 13-14：状态管理库</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>Redux（React） / Pinia（Vue）</li>
                  <li>异步Action、中间件</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：购物车系统（全局状态管理）
                  </span>
                </div>
              </div>

              <!-- Week 15-16 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 15-16：TypeScript</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>类型注解、接口、泛型</li>
                  <li>TS与React/Vue集成</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：重构TodoList为TS版本
                  </span>
                </div>
              </div>

              <!-- Week 17 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 17：测试开发</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>Jest单元测试</li>
                  <li>React Testing Library / Vue Test Utils</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：为组件编写测试用例
                  </span>
                </div>
              </div>

              <!-- Week 18 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 18：性能优化</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>懒加载、代码分割</li>
                  <li>防抖/节流、虚拟滚动</li>
                  <li>Chrome DevTools性能分析</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：优化电影列表页加载速度
                  </span>
                </div>
              </div>

              <!-- Week 19-20 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 19-20：进阶网络与安全</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>WebSocket实时通信</li>
                  <li>XSS/CSRF防御策略</li>
                  <li>JWT身份验证</li>
                </ul>
                <div class="mt-3">
                  <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
                    <i class="fas fa-laptop-code mr-1"></i>
                    实战：实时聊天室（WebSocket + JWT）
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 阶段四 -->
        <div class="relative pl-8 mb-12">
          <div class="absolute left-0 top-0 h-full w-0.5 bg-yellow-200"></div>
          <div class="bg-yellow-50 border border-yellow-100 rounded-lg p-6 relative">
            <div class="absolute -left-4 top-6 h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center text-white">
              <span class="font-bold">4</span>
            </div>
            <h3 class="text-xl font-bold text-yellow-800 mb-2">阶段四：项目实战（4周）</h3>
            <p class="text-yellow-600 mb-4">
              <i class="fas fa-bullseye mr-2"></i>
              完成企业级全栈项目
            </p>

            <div class="space-y-6">
              <!-- Week 21-22 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 21-22：全栈项目搭建</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>
                    <strong>技术选型</strong>
                    ：React + Node.js 或 Vue + Express
                  </li>
                  <li>
                    <strong>数据库</strong>
                    ：MongoDB/Firebase
                  </li>
                  <li>
                    <strong>功能模块</strong>
                    ：用户系统、数据看板、权限控制
                  </li>
                </ul>
                <div class="mt-3">
                  <p class="text-xs font-medium text-gray-500 mb-1">项目要求：</p>
                  <ul class="list-disc pl-5 text-xs text-gray-600 space-y-1">
                    <li>使用Git Flow管理代码</li>
                    <li>编写单元测试覆盖核心逻辑</li>
                    <li>实现CI/CD自动部署（Vercel/Netlify）</li>
                  </ul>
                </div>
              </div>

              <!-- Week 23-24 -->
              <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 card-hover transition-all duration-300">
                <h4 class="font-semibold text-gray-800 mb-2">Week 23-24：项目优化与部署</h4>
                <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>性能优化（Bundle分析、CDN）</li>
                  <li>SEO优化（SSR方案：Next.js/Nuxt.js）</li>
                  <li>容器化部署（Docker基础）</li>
                </ul>
                <div class="mt-3">
                  <p class="text-xs font-medium text-gray-500 mb-1">交付物：</p>
                  <ul class="list-disc pl-5 text-xs text-gray-600 space-y-1">
                    <li>GitHub仓库（含完整Commit历史）</li>
                    <li>线上演示地址</li>
                    <li>项目文档（README.md说明架构、部署步骤）</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 关键贯穿点 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
        <div class="p-6">
          <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-link text-blue-500 mr-3"></i>
            关键贯穿点
          </h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
              <div class="flex items-center mb-3">
                <div class="bg-blue-100 p-2 rounded-full mr-3">
                  <i class="fas fa-code-branch text-blue-600"></i>
                </div>
                <h3 class="font-semibold text-gray-800">每周Git实践</h3>
              </div>
              <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                <li>第1-4周：个人仓库每日提交</li>
                <li>第5周起：使用Feature Branch工作流</li>
                <li>项目阶段：模拟团队PR（Pull Request）审核</li>
              </ul>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
              <div class="flex items-center mb-3">
                <div class="bg-green-100 p-2 rounded-full mr-3">
                  <i class="fas fa-network-wired text-green-600"></i>
                </div>
                <h3 class="font-semibold text-gray-800">网络学习节奏</h3>
              </div>
              <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                <li>每周学习1个HTTP核心概念（如缓存、CORS）</li>
                <li>项目阶段结合Chrome Network面板分析请求</li>
              </ul>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
              <div class="flex items-center mb-3">
                <div class="bg-purple-100 p-2 rounded-full mr-3">
                  <i class="fas fa-user-tie text-purple-600"></i>
                </div>
                <h3 class="font-semibold text-gray-800">软技能培养</h3>
              </div>
              <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                <li>第8周：参与GitHub开源项目（提交文档修复）</li>
                <li>第16周：撰写技术博客（如"TypeScript类型体操心得"）</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 工具链推荐 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
        <div class="p-6">
          <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-tools text-blue-500 mr-3"></i>
            工具链推荐
          </h2>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工具</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">框架</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">React 18 / Vue 3</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">状态管理</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Redux Toolkit / Pinia</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">构建工具</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Vite + Webpack</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">部署平台</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Vercel (React) / Netlify (Vue)</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 页脚 -->
      <div class="text-center text-sm text-gray-500 py-8">+ ⌨️ —— 2025 前端开发学习路线 —— 🌟 +</div>
    </div>

    <script>
      // 平滑滚动效果
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
          e.preventDefault()
          document.querySelector(this.getAttribute("href")).scrollIntoView({
            behavior: "smooth",
          })
        })
      })

      // 卡片悬停效果
      const cards = document.querySelectorAll(".card-hover")
      cards.forEach((card) => {
        card.addEventListener("mouseenter", () => {
          card.style.transition = "all 0.3s ease"
        })
      })
    </script>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
      body {
        font-family: "Noto Sans SC", sans-serif;
        background-color: #f8fafc;
        color: #334155;
        line-height: 1.6;
      }
      .timeline-item::before {
        content: "";
        position: absolute;
        left: -1.5rem;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #e2e8f0;
      }
      .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .stage-badge {
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.25rem 1rem;
        border-radius: 9999px;
        font-weight: 500;
        font-size: 0.875rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }
      .items-start {
        align-items: center;
      }
    </style>
  </body>
</html>
